<!DOCTYPE html>
<html>
<head>
    <title>SwiftShadow Downloader</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            width: 300px;
            padding: 10px;
        }

        button {
            width: 100%;
            padding: 10px;
            margin-top: 10px;
            cursor: pointer;
        }
    </style>
</head>
<body>
<h1>SwiftShadow Downloader</h1>
<button id="downloadCurrentPage">Download Current Page</button>
<button id="openSettings">Open Settings</button>
<div id="statusMessage" style="margin-top: 10px; color: green;"></div>

<h2>Sniffed Resources</h2>
<ul id="resourceList"></ul>

<div class="section">
    <h2>Drag and Drop</h2>
    <div id="dropArea" style="border: 2px dashed #ccc; padding: 20px; text-align: center;">Drag and drop URL here</div>
</div>

<div id="subtitleDownloadSection">
    <h3>Sniffed Subtitles</h3>
    <ul id="subtitleList"></ul>
</div>

<div class="section">
    <h3>Custom Download URL</h3>
    <input id="customDownloadUrl" placeholder="Paste m3u8 URL here" style="width:100%;margin-bottom:5px;padding:5px;"
           type="text">
    <button id="downloadCustomUrl">Download Custom URL</button>
</div>

<h2>Subtitle Download</h2>
<button id="downloadSubtitle">Download Subtitle</button>

<script src="popup.js"></script>
</body>
</html>